<style scoped>
</style>
<template>
	<div>

	 <Form ref="infoForm" :label-width="80" label-colon>
        <Row type="flex" justify="start" class="code-row-bg">
          <Col span="6">
            <FormItem label="原表名">
              <Input v-model="queryParams.dbId" placeholder="请输入源库表名称" clearable />
            </FormItem>
          </Col>
          <!-- <Col span="6">
            <FormItem label="原表名">
              <Input v-model="queryParams.srctable" placeholder="请输入源库表名称" clearable />
            </FormItem>
          </Col> -->
          <Col span="6">
            <Button type="primary"  style="margin-left:30px;" @click="getEtlDBList(1)" class="info_button">查询</Button>
            		<Button type="info" :style="{marginLeft:'30px'}" @click="addDb">新增数据库</Button>
          </Col>
        </Row>
      </Form>


		<Table stripe border :height="this.windowHeight - 200" :columns="columns" :data="data" ref="tables" size="small"
		 :tooltip-theme="menuTheme" :loading="loading"></Table>
		<Page :total="totals" show-sizer :style="{padding:'15px'}" :page-size="sizes" @on-change="swichPage"
		 @on-page-size-change="swichSize" />
		<Modal v-model="modal" title="添加数据库" :mask-closable="false">
			<Add v-if="modal" v-on:fun="change" :allDBList="this.data" :choosed="this.selected" />
			<div slot="footer" :style="{color:'#808695',fontSize:'12px',textAlign:'center'}">温馨提示：连接成功后才能保存</div>
		</Modal>
	</div>
</template>
<script>
	import Add from "./add";
	export default {
		name: "List",
		components: {
			Add
		},
		props: {
			menuTheme: String,
			windowHeight: Number
		},
		data() {
			return {
				loading: true,
				columns: [{
						title: "序号",
						type: "index",
						width: 70,
						align: "center"
					},
					{
						title: "系统",
						key: "dbSysname",
						tooltip: true
					},
					{
						title: "ip",
						key: "dbIp",
						tooltip: true
					},
					{
						title: "端口",
						key: "dbPort",
						tooltip: true
					},
					{
						title: "数据库名",
						key: "dbName",
						tooltip: true
					},
					{
						title: "数据库类型",
						key: "dbType",
						tooltip: true,
						render: (h, params) => {
							return params.row.dbType === "mssql" ?
								h("span", "SqlServer") :
								h("span", params.row.dbType);
						}
					},
					{
						title: "数据库模式",
						key: "dbSchema",
						tooltip: true
					},
					{
						title: "用户",
						key: "username",
						tooltip: true
					},
					{
						title: "创建人",
						key: "createAccount",
						tooltip: true
					},
					{
						title: "添加时间",
						key: "createTime"
					},
					{
						title: "修改时间",
						key: "updateTime"
					},
					{
						title: "操作",
						width: 185,
						align: "center",
						fixed: "right",
						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "info",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.updateFun(params);
											}
										}
									},
									"修改"
								),
								h(
									"Button", {
										props: {
											type: "error",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.remove(params);
											}
										}
									},
									"删除"
								)

							]);
						}
					}
				],
				data: [],
				queryParams:{
					dbId:""
				},
				currentPage: 1,
				sizes: 20,
				totals: 0,
				modal: false,
				selected: {}
			};
		},
		methods: {
			//切换页码
			swichPage(page) {
				this.currentPage = page;
				this.getEtlDBList(this.currentPage);
			},
			//切换每页容量
			swichSize(size) {
				this.sizes = size;
				this.getEtlDBList(1);
			},
			//获取数据库列表
			async getEtlDBList(pages) {
				const sizes = 20;
				const data = {
					pages,
					sizes
				};
				const result = await this.$api.getEtlDBList(data);
				this.loading = false;
				if (result.code === 1) {
					this.data = result.data.list;
					this.totals = result.data.total;
				}
			},
			//打开添加页面
			addDb() {
				this.selected = {};
				this.modal = true;
			},
			//add组件callback方法
			change() {
				this.getEtlDBList(1);
				this.modal = false;
			},
			//打开添加页面
			updateFun(data) {
				this.selected = {...data.row};
				this.modal = true;
			},
		    //删除数据库配置
			remove(data) {
				console.log(data.row);

				this.$Modal.confirm({
					title: "确认删除",
					content: `您确认要删除【${data.row.dbSysname}】数据库连接？</br> 删除后将<span style="color: red;">无法恢复！</span>`,
					onOk: async () => {
						console.log(data);
						this.addLoading = true;
						const result = await this.$api.deleteEtlBusinessDbInfo({ dbId: data.row.dbId });

						console.log(result);

						if (result.code === 1) {
	
							this.$Message.success("删除成功!");
							this.getEtlDBList(1);
							this.$emit("func");
						} else {
							this.$Message.error(result.errMsg);
						}
						this.addLoading = false;
					}
				});
		    },
	

		},
		mounted() {
			this.getEtlDBList(1);
		}
	};
</script>
